<template>
  <div>
    <x-header :left-options="{backText:''}" @on-click-back="$router.go(-1)">反馈详情</x-header>
    <!-- <div style="padding:5%">
            <div>标题：{{item.BACKTITLE}}</div>
            <div class="ys">
                <div>反馈模块：{{item.BACKMODULE}}</div>
                <div style="margin-left:3%">重要性：{{item.IMPORTANT}}</div>
            </div>
            <div>反馈内容：{{item.BACKCONT}}</div>
            <div class="ys">
                <div>反馈人员：{{item.INPUTUSERNAME}}</div>
                <div style="margin-left:3%">反馈时间：{{item.INPUTDATE.substring(0,10)}}</div>
            </div>
    </div>-->
    <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
      <tab bar-position="bottom">
        <tab-item :selected="flagC"
                  @on-item-click="getParams">反馈内容</tab-item>
        <tab-item @on-item-click="queryFlowInfo"
                  :selected="flagF">流程信息</tab-item>
      </tab>
      <div class="sup"></div>
      <div v-if="flagC">
        <group class="part1">
          <cell title="标题" v-model="item.BACKTITLE" text-align="right"></cell>
          <cell title="反馈模块" v-model="item.BACKMODULE"></cell>
          <cell title="问题类别" v-model="item.IMPORTANT"></cell>
        </group>
        <div class="sup"></div>
        <group title="反馈内容及建议">
          <x-textarea v-model="item.BACKCONT"></x-textarea>
        </group>
        <div class="sup"></div>
        <div style="position:relative;left:20px">图片</div>
        <div style="margin-top:10px">
          <picture-upload :pageToken="pageToken" v-model="item.PICTURE" readonly></picture-upload>
        </div>
        <div class="sup"></div>
        <group>
          <x-textarea title="意见回复" v-model="item.IDEA" style="display:none"></x-textarea>
          <cell title="反馈人员" v-model="item.INPUTUSERNAME" text-align="right"></cell>
          <cell title="联系电话" v-model="item.PHONENUM"  text-align="right"></cell>
          <cell title="所在部门" v-model="item.DEPTNAME"  text-align="right"></cell>
          <cell title="反馈日期" v-model="date" text-align="right"></cell>
          <cell title="处理人员" v-model="item.HANDLERFULLNAME" text-align="right"></cell>
          <!-- <person-tree title="处理人员" v-model="person"></person-tree> -->
        </group>
    </div>
    <div v-if="flagF">
            <div style="display:flex;padding:15px">
            <img src="../../assets/img/deal_progress.png" width="25"/>
            <div style="margin-left:2%;">处理过程</div>
          </div>
          <div v-for="(item,index) in flowList" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon.png" class="flowlist_icon" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'"/>
            <div class="flowlist_div_son" v-if="item.commandMessage !='流程开始' && item.commandMessage !='流程结束'">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="commandMes">{{item.commandMessage}}</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
          <div v-for="(item,index) in flowListIng" :key="index" class="flowlist_div">
            <img src="../../assets/img/flowlist_icon_todo.png" class="flowlist_icon"/>
            <div class="flowlist_div_son">
              <div class="dutyPerson">{{item.assignessName}}</div>
              <div class="commandMes">{{item.name}}</div>
              <div class="waitToDo">待办</div>
              <div class="createTime">{{item.createTime}}</div>
            </div>
           </div>
  
        </div>
    </v-touch>
  </div>
</template>

<script>
import {Cell ,Group ,XInput ,XTextarea ,PopupPicker ,Toast , Tab, TabItem} from 'vux'
export default {
  name: "userBackDetailInfo",
  components:{
        Cell,
        Group,
        XInput,
        XTextarea,
        PopupPicker,
        Toast,
        Tab,
        TabItem
    },
  data() {
    return {
      item: this.$route.params.item,
      pageToken:"",
      date:"",
      flagC:true,
      flagF:false,
      flowList:[],
      flowListIng:[],
    };
  },
  mounted() {
    this.getParams();
    this.pageToken = this.guid();
  },
  methods: {
    onSwipeRight () {
      this.$router.push("/index/home");
    },
    queryFlowInfo(){
      this.flagF = true
      this.flagC = false
      let vText = '{"_method":"flow.getInstIdByBizKey","_param":["' + this.item.GUID + '"]}';
      this.$ajax({
        url : this.COMMON_URL,
        method : 'post',
        data : {
         FixJSON : vText
        },
        async : false
      }).then(res=>{
        // console.log("看看instId",res);
        var params = '{"_method":"flow.getTaskProcess","_param":["' + res.data.instId + '"]}';
        this.$ajax({
          method: 'post',
          url: this.COMMON_URL, //+ '?_objName=formflow&_viewId=tasklist',
          data: {
            FixJSON: params
          }
          }).then((res) => {
            console.log("flowlist",res);
              this.flowList = res.data.taskListEnd;
              this.flowListIng = res.data.taskListIng;
          })
      })
    },
    getParams() {
      this.flagF = false
      this.flagC = true
      console.log(this.item);
      this.date = this.item.INPUTDATE.substring(0,10)
    }
  }
};
</script>

<style scoped>
/* .transition-view /deep/ .vux-header .vux-header-title{
        color: #262A34;
    } */
      /* .part1{
      padding: 10px;
      border-bottom: none;
  }
    .sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
} */
.sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
.flowlist_div{
  display:flex;
  margin-bottom: 10px;
}
.flowlist_icon{
  width:30px;
  height:30px;
  padding:10px;
}
.createTime{
  padding: 0 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.commandMes{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:20px;
}
.dutyPerson{
  padding: 10px 10px 5px 10px;
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(25,25,25,1);
  line-height:24px;
}
.flowlist_div_son{
  background-color: #F9F9F9;
  width: 80%;
  height: 120px;
}
.waitToDo{
  padding: 10px 0 0 10px;
  font-size:14px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:#eea347;
  line-height:20px;
}
</style>
